import { useEffect, useState } from "react";
import { fakeRequest } from "../../utils";
import { Button, Spin } from "antd";
import styles from "./Home.module.css";

export default function HomePage() {
  // 使用 useState 来存储数据
  const [data, setData] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [count, setCount] = useState(0);

  // 使用useEffect发送请求，空数组表示只在组件挂载时执行一次
  useEffect(() => {
    const fetchData = async () => {
      // 发送请求
      const isOk = await fakeRequest();
      console.log("接口请求成功！");
      if (isOk) {
        setData("你好");
        setLoading(false);
      } else {
        setError(true);
        setLoading(false);
      }
    };
    fetchData();
  }, []);
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div className={styles.homeWrapper}>
      {loading && <Spin className="loadingSpinner" />}
      {error && <p>出错啦...</p>}
      {data && (
        <div>
          <h1>HomePage</h1>
          <Button
            type="primary"
            size={"large"}
            block={true}
            onClick={handleClick}
          >
            Add {count}
          </Button>
        </div>
      )}
    </div>
  );
}
